<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>property与attr区别</title>
    <style>.active{color:red}</style>
<body>
    <div>
        <p>我爱前端</p>
        <h1 >我喜欢设计UX</h1>   
    </div>
    
    <script>
        var p = document.createElement("p");
        p.innerHTML="good";
        document.body.append(p);
        // 获取div节点
        var div = document.querySelector("div");
        // 父子
        console.log(div.parentNode,div.parentElement)
        console.log(div.childNodes);
        // 兄弟关系
        console.log(div.previousSibling);
        console.log(div.previousElementSibling)
        document.body.replaceChild(p,div);
         

  /*       var p = document.querySelector("p");
        console.log(p.nodeName,p.nodeType)
        console.dir(p);
        p.dataItem="我喜欢秋天";
        console.log(p.dataItem);

        var h1 = document.querySelector("h1");
        h1.setAttribute("title","I do I think ");
        h1.setAttribute("data-item","我喜欢这个夏天");
        console.log(h1.getAttribute("data-item"));

        var child = h1.firstChild;
        console.log(child.nodeType,child);

        var ti = h1.attributes["title"]
        console.log(ti.nodeType,ti); */



    </script>

</body>
</html>